import React, { forwardRef } from 'react'
import PropTypes from 'prop-types'
import { isFn } from 'js-tool-function'
import ReactEchartsCore from '../Core/EchartsReactCore'

import { titleTextStyle, lbLegend, lbGrid } from '../../itemDefaultConfig'
import Empty from '../Empty'

const AreaChart = forwardRef(
  (
    {
      config: { title, legend, series, grid, ...otherConfig },
      showTitle,
      showLabel,
      rotate,
      cloudData,
      interval,
      boundaryGap,
      setColor,
      ...rest
    },
    ref
  ) => {
    let targetArr = []

    const option = {
      title: {
        ...titleTextStyle,
        show: showTitle, // title.show优先级高于showTitle
        ...title,
      },
      tooltip: {
        trigger: 'item',
        padding: [10, 15],
        textStyle: {
          fontSize: 20,
        },
      },
      legend: {
        top: showTitle ? 27 : 'top',
        ...lbLegend,
        ...legend,
      },
      grid: {
        top: showTitle ? 66 : 36,
        ...lbGrid,
        right: '6%',
        ...grid,
      },
      series: series.map((item) => {
        targetArr = targetArr.concat(item.data || [])
        return {
          type: 'wordCloud',
          gridSize: 20,
          sizeRange: [12, 50],
          rotationRange: [0, 0],
          shape: 'circle',
          textStyle: {
            normal: {
              color: isFn(setColor)
                ? setColor
                : function () {
                    return (
                      'rgb(' +
                      Math.round(Math.random() * 255) +
                      ', ' +
                      Math.round(Math.random() * 255) +
                      ', ' +
                      Math.round(Math.random() * 255) +
                      ')'
                    )
                  },
            },
            emphasis: {
              shadowBlur: 10,
              shadowColor: '#333',
            },
          },

          ...item,
        }
      }),
      ...otherConfig,
    }

    if (!targetArr.length) {
      return <Empty />
    }

    return <ReactEchartsCore notMerge config={option} ref={ref} {...rest} />
  }
)

AreaChart.propTypes = {
  theme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  interval: PropTypes.bool,
  showTitle: PropTypes.bool,
  showLabel: PropTypes.bool,
  style: PropTypes.object,
  className: PropTypes.string,
  config: PropTypes.shape({
    series: PropTypes.array.isRequired,
  }).isRequired,
  rotate: PropTypes.number,
  boundaryGap: PropTypes.bool, // 是否两边留白
  opts: PropTypes.shape({
    devicePixelRatio: PropTypes.number,
    renderer: PropTypes.oneOf(['canvas', 'svg']),
    width: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf([null, undefined, 'auto'])]),
    height: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf([null, undefined, 'auto'])]),
  }),
}

AreaChart.defaultProps = {
  style: {},
  classname: '',
  theme: 'macarons',
  rotate: 0,
  showTitle: false,
  interval: false,
  showLabel: false,
  boundaryGap: true,
  config: {
    title: {},
    legend: {},
    toolbox: {},
    grid: {},
    series: [],
  },
}

export default AreaChart
